<template>
	<view>
		<view class="container p30">
			<view class="box flex-box mb30 p30">
				<image class="img-show br10 mr15" :src="courseDetail.thumb_image" mode="aspectFill"></image>
				<view class="flex-1">
					<view class="mb10 fs24 col-0">{{courseDetail.name}}</view>
					<view class="mb10 fs20 col-6">主讲：{{courseDetail.teacher.name}}</view>
					<view class="g-price1">{{courseDetail.salesprice}}</view>
				</view>
			</view>
			<!--  -->
			<view class="box mb30 pt40 plr30">
				<view class="fs28 mb5 fwb">上课人信息</view>
				<view class="ptb30 flex-box m-hairline--bottom">
					<view class="fs28 col-3">姓名</view>
					<input class="tr flex-1 fs28 col-3" v-model="username" type="text" placeholder="请填写真实姓名" placeholder-class="col-9" />
				</view>
				<view class="ptb30 flex-box">
					<view class="fs28 col-3">手机号</view>
					<input class="tr flex-1 fs28 col-3" v-model="mobile" type="number" placeholder="请填写手机号" placeholder-class="col-9" />
				</view>
			</view>
			<!--  -->
			<view class="box p30">
				<view class="mb30 fs28 col-0">重要通知</view>
				<view class="text pb30 m-hairline--bottom mb50">
					<rich-text :nodes="courseDetail.content"></rich-text>
				</view>
				<view class="flex-box mb50">
					<image class="icon-circle mr15" v-if="!isAgree" @click="agreeChange" src="/static/icon/circle_normal.png" mode="aspectFit"></image>
					<image class="icon-circle mr15" v-else @click="agreeChange" src="/static/icon/circle_selected.png" mode="aspectFit"></image>
					<view class="fs24 col-3">我已阅读并同意</view>
					<view class="fs24 col-red">《购买条款》</view>
				</view>
				<!-- <view class="g-btn1" @click="payPopOpen()">提交订单</view> -->
				<view class="g-btn1" @click="pay()">提交订单</view>
			</view>
		</view>
		<!-- 付款弹窗 -->
		<uni-popup ref="payPopup" type="bottom">
			<view class="pay-pop" catchtouchmove="true">
				<view class="flex-box mb20 plr30">
					<view class="fs36 col-black flex-1">请选择支付方式</view>
					<view class="g-price2 fwb">{{courseDetail.salesprice}}</view>
				</view>
				<view class="pay-item flex-box m-hairline--bottom" :class="{ active: pay_mode == 1 }" @click="selectPayMode(1)">
					<image class="icon1 mr30" src="/static/icon/icon_wechat.png" mode="aspectFit"></image>
					<view class="fs28 col-black flex-1">微信支付</view>
					<image class="icon2 normal" src="/static/icon/circle_normal.png" mode="aspectFit"></image>
					<image class="icon2 selected" src="/static/icon/circle_selected.png" mode="aspectFit"></image>
				</view>
				<view class="pay-item flex-box m-hairline--bottom" :class="{ active: pay_mode == 2 }" @click="selectPayMode(2)">
					<image class="icon1 mr30" src="/static/icon/icon_alipay.png" mode="aspectFit"></image>
					<view class="fs28 col-black flex-1">支付宝支付</view>
					<image class="icon2 normal" src="/static/icon/circle_normal.png" mode="aspectFit"></image>
					<image class="icon2 selected" src="/static/icon/circle_selected.png" mode="aspectFit"></image>
				</view>
				<view class="ptb40 col-red fs28 tc" @click="pay()">立即支付</view>
			</view>
		</uni-popup>
		<!-- 付款成功弹窗 -->
		<uni-popup ref="successPopup" type="bottom">
			<view class="g-success-pop tc" catchtouchmove="true" @click="paySuccessPopClose">
				<image class="icon-success" src="/static/icon/icon_circle_success.png" mode="aspectFit"></image>
				<view class="fs30 col-3">恭喜您报名成功！</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			username: '',
			mobile: '',
			course_id: 0,
			courseDetail:{teacher:{name:''}},
			pay_mode: 1 ,
			isAgree: false
		};
	},
	onLoad(options){
		this.course_id = options.course_id || 0;
		// #ifdef H5
		let openid = options.openid || '';
		if(openid == '' && this.$core.getCache('wx_openid')){
			openid = this.$core.getCache('wx_openid');
		}
		if(openid == ''){
		 location.href = getApp().globalData.apiBaseUri+"/xiluedu.user/auth?course_id="+options.course_id+'&target_url='+ encodeURIComponent(location.href);
		 return false;
		}
		this.$core.setCache('wx_openid', openid);
		this.fetchOfflineCourseDetail()
		// #endif
		// #ifdef MP-WEIXIN
		this.fetchOfflineCourseDetail()
		// #endif
		
	},
	methods: {
		
		//课程详情
		fetchOfflineCourseDetail(){
			let course_id = this.course_id;
			this.$core.get({url:'xiluedu.offline_course/detail',data:{offline_course_id: course_id},success:(ret)=>{
				 this.courseDetail = ret.data;
			}});
		},
		
		pay(){
			if(!this.course_id){
				uni.showToast({'title':"课程参数错误",icon:"none"});
				return false;
			}
			let username = this.username.trim();
			let mobile = this.mobile.trim();
			if(!username || !mobile){
				uni.showToast({'title':"请填写报名信息",icon:"none"});
				return false;
			}
			if(!this.isAgree){
				uni.showToast({'title':"请先同意协议",icon:"none"});
				return false;
			}
			let data = {offline_course_id:this.course_id,username:username,mobile:mobile,platform:'wxmini'};
			// #ifdef H5
			data.platform = 'wxpublic';
			// #endif
			this.$core.post({url:'xiluedu.offline_order/create_order',data: data,success:(ret)=>{
				 //this.payment(ret.data);
				 uni.redirectTo({
				 	url: '/pages/pay/pay?type=offline&order_id='+ret.data.id+'&order_no='+ret.data.order_no+'&pay_price='+ret.data.pay_price
				 })
			}});
		},
		payment(order){
			this.$core.post({url:'xiluedu.pay/pay',data:{type:'offline',pay_type:1,order_id:order.id,platform:'wxmini'},success:(ret)=>{
				let wxconfig =  ret.data;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: wxconfig.timeStamp,
					nonceStr: wxconfig.nonceStr,
					package: wxconfig.package,
					signType: wxconfig.signType,
					paySign: wxconfig.paySign,
					success: function (res) {
						console.log(res);
					},
					fail: function (err) {
						console.log(err);
					}
				});
			}});
		},
		// 打开付款弹窗
		payPopOpen() {
			if(!this.username.trim() || !this.mobile.trim()){
				uni.showToast({'title':"请填写报名信息",icon:"none"});
				return false;
			}
			if(!this.isAgree){
				uni.showToast({'title':"请先同意协议",icon:"none"});
				return false;
			}
			this.$refs.payPopup.open();
		},
		selectPayMode(i) {
			this.pay_mode = i;
		},
		// 打开付款成功弹窗
		paySuccessPopOpen() {
			this.$refs.successPopup.open();
		},
		// 关闭付款成功弹窗
		paySuccessPopClose() {
			this.$refs.successPopup.close();
		},
		agreeChange(e) {
			this.isAgree = !this.isAgree;
		}
	}
};
</script>

<style scoped>
.box {
	border: 1rpx solid #e1e1e1;
	border-radius: 10rpx;
	box-shadow: 0 2rpx 16rpx 0 rgba(0, 0, 0, 0.05);
}
.box .img-show {
	display: block;
	width: 190rpx;
	height: 110rpx;
}
.box .text {
	font-size: 24rpx;
	color: #000000;
	line-height: 60rpx;
}
.box .icon-circle {
	display: block;
	width: 34rpx;
	height: 34rpx;
}
</style>
